<template>
    <div>
        <div style="background-color: #d9d9d9;font-size: 30px;"><span style="margin-left: 30px;">上传头像</span></div>
        <div style="margin-left: 20px;margin-top: 30px;margin-bottom: 20px"><el-image style="width: 200px;height: 200px;" :src="userInfo.ima"></el-image></div>
        <div style="margin-left: 60px;margin-bottom: 20px">
            <el-upload
                    drag
                    :action="`${this.$axios.defaults.baseURL}/api/file/upload`"
                    :on-success="onSuccess"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <img :src="imgSrc" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "profi",
        data(){
            return{
                userInfo: {},
                imgSrc:'',
            }
        },
        methods: {

            onSuccess(res) {
                this.imgSrc = this.$axios.defaults.baseURL + res.data.url;
                console.log(res);
                this.userInfo.ima=this.imgSrc;//
                this.$axios.post("/api/user/userfile",this.userInfo).then(res=>{
                    if (res.data.status===1){
                        this.userInfo=res.data.data;
                        location.reload();
                        this.$message.success(res.data.msg);

                    }else {
                        this.$message.error(res.data.msg);
                    }
                })

            },

        },
        created(){
            this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                this.userInfo = res.data.data;
            })
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

</style>